// 选卡哪些是属性
// - 获取元素是属性
// - 大盒子 按钮 div 下标iNow

function Tab(ele) {
    // 大盒子
    this.ele = ele
    // 按钮
    this.on = this.ele.querySelectorAll('.goodsConTop span')
    // div
    this.open = this.ele.querySelectorAll('.goodsConDown>div')
    // 下标
    this.iNow = 0

    // 执行事件方法
    this.addEvent()
}

// 方法
Tab.prototype.addEvent = function () {
    // 循环按钮加事件
    // console.log(this)       // Tab
    let _this = this
    this.on.forEach(function (ele, index) {
        // 事件
        ele.addEventListener('click', function () {
            // console.log(this)       // 按钮
            // console.log(_this)      // Tab
            _this.iNow = index
            // 切换函数
            _this.tab()
        })
    })
}

Tab.prototype.tab = function () {
    // 清空样式
    this.on.forEach((ele, index) => {
        // console.log(this)
        this.on[index].className = ''
        this.open[index].className = ''
    })

    // 当前加样式
    this.on[this.iNow].className = 'on'
    this.open[this.iNow].className = 'open'
}